<template>
  <div class="NavMenu">
    <img class="logo" src="/icons/neusoftLogo.svg" />
    <el-menu
      :default-active="menuList[0].path"
      class="el-menu-demo"
      text-color="#000000"
      active-text-color="#3989fa"
      mode="horizontal"
      :router="true"
      :collapse="false"
      :ellipsis="false"
    >
      <el-menu-item v-for="(item, index) in menuList" :index="item.path" :key="index">
        <template v-slot:title>
          <span>{{ item.title }}</span>
        </template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { useContextStore } from '@/stores/mian/mainMenu.js'
import { storeToRefs } from 'pinia'
const contextStore = useContextStore()
const { menuList } = storeToRefs(contextStore)
</script>

<style scoped>
.NavMenu {
  display: flex;
  height: 56px;
  .logo {
    width: 160px;
    height: 56px;
  }
  .el-menu {
    margin-left: 10px;
  }
}
</style>
